<template>
    <main style="text-align: center;">
        <ul class="load-media">
            <li :class="{'active-theme':loadType == 'mp4'}" @click="onLoadType('mp4')">LOAD MP4</li>
            <li :class="{'active-theme':loadType == 'flv'}" @click="onLoadType('flv')">LOAD FLV</li>
            <li :class="{'active-theme':loadType == 'hls'}" @click="onLoadType('hls')">LOAD HLS</li>
        </ul>

        <div class="card-box">
            <img src="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/laptop3.png" alt="" height="auto" width="100%">
            <div id="mui-player"></div>
        </div>
        

        <div class="begin-use theme-button" @click="beginUse">Begin Use →</div>
    </main>
</template>

<script>
    import config from '../public/js/config.js'
    import globals from '../public/js/global'
    import { listener } from '../public/js/playerListener'

    export default {
        data() {
            return {
                loadType:'mp4',

                playerConfig:{}, // 播放器配置
            }
        },
        created() {
        },
        mounted() {
            this.playerConfig = Object.assign({},config);
            this.playerConfig['objectFit'] = 'cover';
            this.playerConfig['autoFit'] = false;
            this.playerConfig['width'] = '63.6%';
            this.playerConfig['height'] = '70%';
            if(this.$lang.indexOf('en') > -1) {
                this.playerConfig['lang'] = 'en';
                this.playerConfig['title'] = 'Your Title';
            }else if(this.$lang.indexOf('zh') > -1) {
                this.playerConfig['lang'] = 'zh-cn';
                this.playerConfig['title'] = '你的视频标题';
            }

            let muiplayer = new MuiPlayer(this.playerConfig);
            globals.mp = muiplayer;

            // 全屏时切换视频适应窗口
            muiplayer.on('fullscreen-change',function(data) {
                if(data.fullscreen) {
                    muiplayer.video().style.objectFit = 'contain';
                }else {
                    muiplayer.video().style.objectFit = 'cover';
                }
            })

            listener();
        },
        beforeDestroy() {
            globals.mp.destory();
        },
        methods:{
            beginUse() {
                this.$router.push('guide');
            },
            showLoading() {
                globals.mp.showLoading();
            },
            onLoadType(type) {
                if(this.loadType != type) {
                    this.loadType = type;
                    switch (type) {
                        case 'flv':
                            this.playerConfig['parse'] = {
                                type:'flv',
                                loader:window.flvjs,
                                config:{ 
                                    cors:true
                                },
                            }
                            globals.mp.reloadUrl(globals.address.src_flv);
                            break;
                        case 'hls':
                            this.playerConfig['parse'] = {
                                type:'hls',
                                loader:window.Hls,
                                config:{
                                    debug:false,
                                },
                            }
                            globals.mp.reloadUrl(globals.address.src_hls);
                            break;
                        case 'mp4':
                            delete this.playerConfig['parse'];
                            globals.mp.reloadUrl(globals.address.src_hd);
                            break;
                    }

                    // console.log(config);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .sub-contenxt {
        color: #555555;
        text-align: center;
        font-weight: bold;
    }
    .card-box {
        border-bottom: 1px solid #e8eaec;
        position: relative;
        #mui-player {
            height: 70%;
            width: 63.6%;
            position: absolute;
            top: 7.8%;
            left: 18.2%;
            border-radius: 3px;
        }
    }
    .begin-use {
        padding: 15px 20px;
        margin-bottom: 50px;
        margin-top: 30px;
    }
    .load-media {
        list-style: none;
        text-align: center;
        user-select: none;
        margin: 18px auto;
        li {
            display: inline-block;
            display: inline-block;
            background-color: #CCCCCC;
            color: white;
            padding: 4px 18px;
            font-size: 14px;
            border-radius: 50px;
            margin:5px;
            cursor: pointer;
        }
        .active-theme {
            background-color: #2d8cf0 !important;
        }
    }
    .footer-licensed {
        padding: 20px 0;
        color: #666;
    }
</style>